<template>
    <main class="search-result">
      <homepage-nav :active-index="1"></homepage-nav>
      <!--<section class="categories">-->
        <!--<div v-for="(item,index) in categories" :key="index"-->
             <!--class="category" :class="{active:index===activeIndex}"-->
        <!--@click="handleSwitchCategory(index)">-->
          <!--<span class="category-name">{{item.name}}</span>-->
        <!--</div>-->
      <!--</section>-->
      <section class="main-table">
        <el-table v-loading="loading"
                  :data="page.list" stripe border>
          <el-table-column
            prop="name"
            label="名称" >
          </el-table-column>
          <el-table-column
            prop="category"
            label="类别" >
            <template slot-scope="scope">
              {{scope.row.category&&scope.row.category.name}}
            </template>
          </el-table-column>
          <el-table-column
            prop="grade"
            label="品级" >
            <template slot-scope="scope">
              {{scope.row.grade&&scope.row.grade.name}}
            </template>
          </el-table-column>
          <el-table-column
            prop="weight"
            label="可供量(吨)" >
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价(每吨)" >
          </el-table-column>
          <el-table-column
            prop="registryType"
            label="状态" min-width="100">
            <template slot-scope="scope">
              {{auditTypeMap[scope.row.status]}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top:20px;"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="page.number"
                       :page-sizes="[10, 20, 50, 100]"
                       :page-size="page.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="page.totalElements">
        </el-pagination>
      </section>
    </main>
</template>

<script>
import { mapGetters } from 'vuex';
import EntityAPI from '@/api/homepage/homepage';
import { PageMethods } from '@/utils/crud';
import HomepageNav from './homepage/HomepageNav';

export default {
    components: {
        HomepageNav
    },
    data() {
        return {
            loading: 0,
            activeIndex: 0,
            filter: {
                type: null
            },
            page: {
                totalPage: 1,
                current: 1,
                totalElements: 2,
                size: 20,
                list: [],
                conditionMap: { category: null, type: 1 }
            },
            auditTypeMap: ['提交信息', '待审核', '交易中', '已完成']
        };
    },
    computed: {
        ...mapGetters([
            'dictionary'
        ]),
        categories() {
            return this.$store.state.business.categories;
        },
        activeCategory() {
            return this.categories[this.activeIndex] || {};
        }
    },
    created() {
        this.getPage();
    },
    methods: Object.assign(PageMethods(EntityAPI), {
        handleSwitchCategory(index) {
            this.activeIndex = index;
            this.getPage();
        },
        getPage() {
            this.loading++;
            EntityAPI.sellPage()
                .then(data => {
                    this.loading--;
                    this.page = Object.assign(this.page, data.obj);
                })
                .catch(error => {
                    this.loading--;
                    console.error(error);
                });
        },
    })
};
</script>
<style lang="scss">
  @import "../../assets/front/front";

  .search-result {
    width: $page-width;
    .categories {
      height:40px;
      @include flex-align-center;
      border-top: 2px solid $bg-color;
      .category {
        height:40px;
        line-height: 40px;
        font-size: 16px;
        color: $font-dark-color;
        cursor: pointer;
        &.active {
          color: $main-color;
          border-bottom: 2px solid $main-color;
        }
        .category-name {
          border-right: $border;
          padding:0 12px;
        }
      }
    }
    .search-form {
      height:86px;
      margin-top:10px;
      padding:0 50px;
      background: $bg-color;
      display: flex;
      flex-wrap: wrap;
      .form-item {
        margin:5px 10px;
        @include flex-align-center;
        .form-label{
          margin-right:5px;
          font-size:12px;
          color: #323232;
        }
      }
    }
    .main-table {
      margin-top:10px;
      .table-header {
        height:32px;
        @include flex-align-center;
        justify-content: space-around;
        background: $bg-color;
        font-size: 16px;
        color: $font-gray-color;
        border: $border;
      }
      .table-row {
        height:50px;
        border-bottom: $border;
        &.active {
          background: $main-color;
          opacity: 0.5;
        }
      }
    }
  }
</style>
